import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// import Home from "../components/Home"
// import About from "../components/About"
// import User from "../components/User"
// 1.通过 Vue.use() 安装插件
Vue.use(Router)

// 路由懒加载, 打包的时候把生成的文件按路由打包 一个懒加载对应打包的一个js文件
const Home = () => import("../components/Home")
const HomeNews = () => import("../components/HomeNews")
const HomeMessage = () => import("../components/HomeMessage")
const About = () => import("../components/About")
const User = () => import("../components/User")
const Profile = () => import("../components/Profile")

Vue.prototype.test = "哈哈哈哈哈"

const routes = [// 2.创建VueRouter对象
  // {
  //   path: '/', // '/'和''表示默认路由
  //   name: 'HelloWorld',
  //   component: HelloWorld
  // },
  {
    path: "/",
    redirect: "/home",  // 重定向
    meta: {
      title: "首页"
    }
  },
  {
    path: "/home", // 路由路径
    component: Home,
    meta: {
      title: "首页"
    },
    children: [
      {
        path: "", // 子路由,前面不需要加上"/"会自动加
        component: HomeNews,
        meta: {
          title: "首页新闻"
        }
      },
      {
        path: "news", // 子路由,前面不需要加上"/"会自动加
        component: HomeNews,
        meta: {
          title: "首页新闻"
        }
      },
      {
        path: "message",
        component: HomeMessage,
        meta: {
          title: "首页消息"
        }
      }
    ]
  },
  {
    path: "/about",
    component: About,
    meta: {
      title: "关于"
    },
    beforeEnter: (to, from, next) => {
      console.log("about beforeEnter");
      next()
    }
  },
  {
    path: "/user/:userId", // 动态路由
    component: User,
    meta: {
      title: "用户"
    }
  },
  {
    path: "/profile",
    component: Profile,
    meta: {
      title: "档案"
    }
  }
]

const router = new Router({
  // 配置路由和组件之间的关系
  routes, // 但是这样配置url地址有#号,如http://localhost:8080/#/home
  mode: "history", // 消除url的#号,如http://localhost:8080/home 用html的history设置跳转
  linkActiveClass: "active" // 统一修改点中路由的样式
})

// 前置钩子(guard)
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.meta.title;
  // console.log(to);
  // console.log("++++++");
  next()
})
// 后置钩子(hook)
router.afterEach((to, from) => {
  // console.log("------");
})

// 3.将router对象传入Vue实例
export default router
